<template>
  <div>
    <Frame
      class="frame"
      :size="detailsName == '反馈' ? 'large-12' : 'large-11'"
      :title="detailsName + '详情'"
      :visible="dialogVisible"
    >
      <template #default>
        <div class="orderDetail">
          <div
            class="Information"
            :style="
              detailsName == '反馈' ? 'width: 100%;border-right:none;' : ''
            "
          >
            <el-descriptions title="告警信息" :column="2">
              <div slot="title">
                <i class="iconfont fuzhushuxian"></i>
                <span>告警信息</span>
              </div>
              <el-descriptions-item label="报警时间">{{
                detailsInfo.createTime
              }}</el-descriptions-item>
              <el-descriptions-item label="状态" v-if="detailsName == '火情'">
                <span v-if="detailsInfo.status == 1" style="color: #f56c6c"
                  >未处理</span
                >
                <span v-else-if="detailsInfo.status == 2">处理中</span>
                <span v-else-if="detailsInfo.status == 3" style="color: #67c23a"
                  >已处理</span
                >
                <span v-else>-</span>
              </el-descriptions-item>
              <el-descriptions-item label="状态" v-if="detailsName == '故障'">
                <span v-if="detailsInfo.status == 1" style="color: #f56c6c"
                  >未处理</span
                >
                <span v-else-if="detailsInfo.status == 2">已忽略</span>
                <span v-else-if="detailsInfo.status == 3">修复中</span>
                <span v-else-if="detailsInfo.status == 4" style="color: #67c23a"
                  >已修复</span
                >
              </el-descriptions-item>
              <el-descriptions-item label="报警类型">{{
                detailsName == "火情" ? "火警" : detailsName
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="设备信息" :column="2">
              <div slot="title">
                <i class="iconfont fuzhushuxian"></i>
                <span>设备信息</span>
              </div>
              <el-descriptions-item label="主机编码"
                >{{ detailsInfo.imei || detailsInfo.deviceCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="探测器编码"
                v-if="
                  detailsInfo.subDeviceCode != '' && detailsInfo.subDeviceCode
                "
                >{{ detailsInfo.subDeviceCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="探测器名称"
                v-if="detail.detectorName != '' && detail.detectorName"
                >{{ detail.detectorName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="探测器型号"
                v-if="detail.detectorTypeName != '' && detail.detectorTypeName"
                >{{ detail.detectorTypeName }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="基础信息" :column="2">
              <div slot="title">
                <i class="iconfont fuzhushuxian"></i>
                <span>基础信息</span>
              </div>
              <el-descriptions-item label="联网单位">{{
                detailsInfo.orgName
              }}</el-descriptions-item>
              <el-descriptions-item label="消控室名称">{{
                fcInfo.name
              }}</el-descriptions-item>
              <el-descriptions-item label="消控室地址">{{
                fcInfo.address
              }}</el-descriptions-item>
            </el-descriptions>

            <div class="camara_box" v-if="deviceStr.cameraStatus == 1">
              <div
                :id="`Player1${deviceStr.cameraInfo.id}`"
                class="camara_video"
              ></div>
              <div v-if="name != ''" class="error">{{ name }}</div>
            </div>
            <div class="empty-video" v-else>
              <img
                src="../../../../assets/images/datav/emptyVideo.png"
                alt=""
              />
            </div>
          </div>
          <div class="middle" v-if="detailsName != '反馈'"></div>
          <!-- 火情弹窗处理 -->
          <div class="flex-1" v-if="detailsName == '火情'">
            <div class="box-handle">
              <div div v-if="tableData.length == 0">
                <div class="header">
                  <i class="iconfont fuzhushuxian"></i>
                  <span>告警处理</span>
                </div>
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="refalarmHandleInfo"
                  label-width="100px"
                  label-position="top"
                  style="padding-left: 40px"
                >
                  <el-form-item
                    size="small"
                    label="告警类型"
                    prop="alarmFactor"
                  >
                    <!-- <el-autocomplete clearable @clear="clearAlarmFactor" v-model="ruleForm.alarmFactor"
                      :fetch-suggestions="querySearch" placeholder="请选择" size="small" :maxlength="10"
                      style="width: 100%"></el-autocomplete> -->
                    <el-radio
                      v-model="ruleForm.alarmFactor"
                      label="火警"
                      style="margin-right: 25px"
                      >火警</el-radio
                    >
                    <el-radio
                      v-model="ruleForm.alarmFactor"
                      label="误报"
                      style="margin-right: 25px"
                      >误报</el-radio
                    >
                    <el-radio
                      v-model="ruleForm.alarmFactor"
                      label="测试"
                      style="margin-right: 25px"
                      >测试</el-radio
                    >
                    <el-radio
                      v-model="ruleForm.alarmFactor"
                      label="转工单"
                      style="margin-right: 0"
                      >转工单</el-radio
                    >
                  </el-form-item>

                  <el-form-item
                    size="small"
                    label="处理人"
                    v-if="ruleForm.alarmFactor == '转工单'"
                    prop="handleUserId"
                  >
                    <el-select
                      v-model="ruleForm.handleUserId"
                      filterable
                      placeholder="请选择处理人"
                      style="width: 100%"
                      size="small"
                      clearable
                    >
                      <el-option
                        v-for="(item, i) in userIds"
                        :key="i"
                        :label="item.userName"
                        :value="item.userId"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item size="small" label="抄送人" v-if="ruleForm.alarmFactor == '转工单'">
                    <el-select v-model="ruleForm.userIds" filterable multiple collapse-tags placeholder="请选择抄送人"
                      style="width: 100%" size="small" clearable>
                      <el-option v-for="(item, i) in userIds" :key="i" :label="item.userName" :value="item.userId">
                      </el-option>
                    </el-select>
                  </el-form-item> -->

                  <el-form-item
                    size="small"
                    label="照片"
                    v-if="ruleForm.alarmFactor != '转工单'"
                  >
                    <el-upload
                      :class="{ disabled: uploadDisabled }"
                      :on-remove="handleRemove"
                      :on-change="uploadSectionFile"
                      :action="baseUrl"
                      list-type="picture-card"
                      accept=".jpg,.png"
                      :on-preview="null"
                      :headers="headers"
                      :before-upload="beforeAvatarUpload"
                      :on-success="handleSuccessFunction"
                      :limit="1"
                      :on-exceed="handleExceedScene"
                      :file-list="fileList"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>

                  <el-form-item
                    size="small"
                    label="反馈内容"
                    v-if="ruleForm.alarmFactor != '转工单'"
                  >
                    <el-input
                      maxlength="30"
                      rows="3"
                      size="small"
                      type="textarea"
                      v-model="ruleForm.feedback"
                      resize="none"
                      placeholder="请输入"
                      :autosize="{ minRows: 2, maxRows: 5 }"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <!-- <span slot="footer" class="footer-btns">
                <el-button size="small" @click="addSubmit">确定</el-button>
              </span> -->
              </div>
              <div v-else style="margin-left: 25px; height: 100%">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="处理记录" name="first">
                    <el-descriptions :column="1" class="el_first">
                      <el-descriptions-item label="处理人">{{
                        tableData.length > 0 ? tableData[0].username : ""
                      }}</el-descriptions-item>
                      <el-descriptions-item label="告警类型">
                        {{
                          tableData.length > 0 ? tableData[0].alarmFactor : ""
                        }}
                      </el-descriptions-item>
                      <el-descriptions-item label="反馈内容">{{
                        tableData.length > 0 ? tableData[0].feedback : ""
                      }}</el-descriptions-item>
                      <el-descriptions-item label="处理时间"
                        >{{
                          tableData.length > 0 ? tableData[0].handlingTime : ""
                        }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        label="照片"
                        v-if="tableData.length > 0 && tableData[0].pic"
                      >
                        <el-image
                          style="width: 100px"
                          :src="tableData[0].pic"
                        ></el-image>
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-tab-pane>
                  <el-tab-pane
                    label="工单处理"
                    name="second"
                    v-if="user.userId == workStr.userId && workStr.status != 4"
                  >
                    <el-form
                      :model="addWork"
                      :rules="rulesWork"
                      ref="refaddWork"
                      label-width="0px"
                      label-position="top"
                      style="max-height: 60vh; overflow-y: auto"
                    >
                      <!-- :label="getlabel" -->
                      <el-form-item size="small" prop="status">
                        <el-radio-group v-model="addWork.status">
                          <el-radio
                            :label="item.id"
                            v-for="(item, index) in statusList"
                            :key="index"
                            style="margin-right: 15px"
                            >{{ item.name }}</el-radio
                          >
                        </el-radio-group>
                      </el-form-item>

                      <el-form-item
                        size="small"
                        v-if="addWork.status == 11"
                        prop="maintenanceUserId"
                      >
                        <el-select
                          v-model="addWork.maintenanceUserId"
                          filterable
                          placeholder="请选择处理人"
                          style="width: 100%"
                          size="small"
                          clearable
                        >
                          <el-option
                            v-for="(item, i) in userIds"
                            :key="i"
                            :label="item.userName"
                            :value="item.userId"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item size="small" v-if="addWork.status == 5">
                        <el-select
                          v-model="addWork.userIds"
                          filterable
                          multiple
                          collapse-tags
                          placeholder="请选择抄送人"
                          style="width: 100%"
                          size="small"
                          clearable
                        >
                          <el-option
                            v-for="(item, i) in userIds"
                            :key="i"
                            :label="item.userName"
                            :value="item.userId"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-form-item
                        size="small"
                        v-if="addWork.status == 4 || addWork.status == 5"
                      >
                        <div style="width: 100%">
                          <el-upload
                            :class="{ disabled: uploadDisabled }"
                            :on-remove="handleRemove2"
                            :on-change="uploadSectionFile2"
                            :action="baseUrl"
                            :file-list="fileList2"
                            list-type="picture-card"
                            accept=".jpg,.png"
                            :on-preview="null"
                            :headers="headers"
                            :before-upload="beforeAvatarUpload2"
                            :on-success="handleSuccessFunction2"
                            :limit="5"
                            :on-exceed="handleExceedScene2"
                            :on-error="uploadFileError"
                          >
                            <i class="el-icon-plus"></i>
                          </el-upload>
                        </div>
                      </el-form-item>

                      <el-form-item
                        size="small"
                        v-if="addWork.status == 4 || addWork.status == 5"
                      >
                        <el-upload
                          class="upload-demo"
                          :action="baseUrl"
                          :file-list="fileList2"
                          :headers="headers"
                          :on-success="onsuccessVideo"
                          accept=".mp4"
                          :on-remove="handleVideo"
                          multiple
                          :limit="1"
                          :on-exceed="handleExceed"
                          :before-upload="beforeUploadVideo"
                        >
                          <el-button size="small" type="primary"
                            >上传视频</el-button
                          >
                        </el-upload>
                      </el-form-item>

                      <el-form-item size="small">
                        <el-input
                          type="textarea"
                          :rows="2"
                          placeholder="请输入备注内容"
                          v-model="addWork.remark"
                          maxlength="100"
                          resize="none"
                          :autosize="{ minRows: 2, maxRows: 5 }"
                          style="width: 100%"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <el-tab-pane
                    label="工单流转"
                    name="third"
                    v-if="workStr != ''"
                  >
                    <div class="timeline-container">
                      <el-timeline>
                        <el-timeline-item
                          color="#7367F0"
                          size="large"
                          v-if="
                            workStr.status == 6 ||
                            workStr.status == 7 ||
                            workStr.status == 4
                          "
                        >
                          <div class="item-title">
                            工单结束 <span>{{ workStr.completionTime }}</span>
                          </div>
                        </el-timeline-item>

                        <el-timeline-item
                          color="#7367F0"
                          size="large"
                          v-if="workStr.ccPersons"
                        >
                          <div class="item-title">
                            抄送时间 <span>{{ workStr.completionTime }}</span>
                            <div style="color: #cfd3ec; margin: 8px 0">
                              抄送人：
                              <span
                                v-for="(item, index) in workStr.ccPersons"
                                :key="index"
                                style="display: inline-block"
                                >{{ item }}
                                <span
                                  v-if="index !== workStr.ccPersons.length - 1"
                                  >，</span
                                >
                              </span>
                            </div>
                          </div>
                        </el-timeline-item>

                        <el-timeline-item
                          color="#7367F0"
                          size="large"
                          v-for="(item, index) in workList"
                          :key="index"
                        >
                          <div>
                            <div class="item-title">
                              {{
                                item.status == 1
                                  ? "派单"
                                  : item.status == 2
                                  ? "接单"
                                  : item.status == 3
                                  ? "值班人员退单"
                                  : item.status == 4
                                  ? "修复中"
                                  : item.status == 5
                                  ? "完成修复"
                                  : item.status == 6
                                  ? "完成修复"
                                  : item.status == 7
                                  ? "完成修复"
                                  : item.status == 8
                                  ? "完成修复"
                                  : item.status == 9
                                  ? "完成修复"
                                  : item.status == 10
                                  ? "已忽略"
                                  : "重新派单"
                              }}
                              <span>{{ item.createTime }}</span>
                            </div>
                            <div class="info-box">
                              <div class="info-row">
                                <div class="label">
                                  <div v-if="item.status == 1">
                                    派单人：{{ item.username }}
                                  </div>
                                  <div v-else>处理人：{{ item.username }}</div>
                                  <div
                                    v-if="
                                      item.status != 10 && item.remark != ''
                                    "
                                  >
                                    备注：{{
                                      item.remark == "" ? "- " : item.remark
                                    }}
                                  </div>
                                </div>
                              </div>
                              <div
                                class="info-row"
                                v-if="
                                  item.fileList != null && item.fileList != ''
                                "
                              >
                                <div class="image-box">
                                  <el-image
                                    class="elImage"
                                    :src="item2.file"
                                    v-for="(item2, index) in item.fileList"
                                    :key="index"
                                    :preview-src-list="item.fileListArray"
                                    v-if="
                                      item2.file.indexOf('.png') != -1 ||
                                      item2.file.indexOf('.jpg') != -1
                                    "
                                  ></el-image>
                                  <div v-else style="width: 100%">
                                    <video
                                      ref="videoPlayer"
                                      :src="item2.file"
                                      controls
                                      class="elImage"
                                      style="width: 30%"
                                    ></video>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </el-timeline-item>

                        <el-timeline-item
                          color="#7367F0"
                          size="large"
                          style="padding-bottom: 0"
                        >
                          <div class="item-title">
                            生成工单 <span>{{ workStr.createTime }}</span>
                          </div>
                        </el-timeline-item>
                      </el-timeline>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
          <!-- 故障弹窗处理 -->
          <div class="flex-1" v-if="detailsName == '故障'">
            <div class="box-handle">
              <div v-if="detailsInfo.status == 1">
                <div class="header">
                  <i class="iconfont fuzhushuxian"></i>
                  <span>故障处理</span>
                </div>
                <el-form
                  :model="addInfo"
                  :rules="addInforules"
                  ref="refAddInfo"
                  label-width="100px"
                  class="el_form"
                  label-position="top"
                  style="padding-left: 40px"
                >
                  <el-form-item
                    size="small"
                    label="处理类型"
                    prop="confirmResult"
                  >
                    <el-radio-group v-model="addInfo.confirmResult">
                      <el-radio
                        :label="item"
                        v-for="(item, index) in confirmResultList"
                        :key="index"
                        >{{ item }}</el-radio
                      >
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    size="small"
                    label="处理方式"
                    prop="confirmmode"
                    v-if="
                      addInfo.confirmResult == '真实隐患' ||
                      addInfo.confirmResult == '误报'
                    "
                  >
                    <el-radio-group v-model="addInfo.confirmmode">
                      <el-radio label="现场解决">现场解决</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item size="small" label="备注信息" prop="remark">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="备注信息"
                      v-model="addInfo.remark"
                      oninput="value=value.replace(/\s*/g,'')"
                      @blur="addInfo.remark = $event.target.value"
                      maxlength="100"
                      resize="none"
                      size="small"
                      :autosize="{ minRows: 2, maxRows: 15 }"
                      style="width: 100%"
                      show-word-limit
                    ></el-input>
                  </el-form-item>
                </el-form>
                <!-- <span slot="footer" class="footer-btns">
                  <el-button size="small" @click="onAdd">确定</el-button>
                </span> -->
              </div>
              <div v-else style="margin-left: 25px">
                <el-descriptions title="处理记录" :column="1">
                  <el-descriptions-item label="处理方式">
                    <span v-if="localEditInfo.mode == 0">现场处理</span>
                    <span v-else>工单处理</span></el-descriptions-item
                  >
                  <el-descriptions-item label="上报人用户名">{{
                    localEditInfo.username || "-"
                  }}</el-descriptions-item>
                  <el-descriptions-item label="确认人用户名">{{
                    localEditInfo.confirmUsername
                  }}</el-descriptions-item>
                  <el-descriptions-item label="确认时间">{{
                    localEditInfo.confirmTime
                  }}</el-descriptions-item>
                  <el-descriptions-item label="备注信息">{{
                    localEditInfo.remark
                  }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="footer-btns">
          <el-button size="small" @click="closeDialog">关闭</el-button>
          <el-button
            size="small"
            @click="onAdd"
            v-if="detailsName == '故障' && detailsInfo.status == 1"
            >确定</el-button
          >
          <el-button
            size="small"
            @click="addSubmit"
            v-if="detailsName == '火情' && detailsInfo.status == 1"
            >确定</el-button
          >
          <el-button
            size="small"
            @click="addSubmitWork"
            v-else-if="
              user.userId == workStr.userId &&
              workStr.status != 4 &&
              activeName == 'second'
            "
            >确定</el-button
          >
        </div>
      </template>
    </Frame>
  </div>
</template>

<script>
import {
  reqAlarmHandle,
  reqClosedLoop,
  reqAlarmHandleResult,
  reqHiddenDangerUpdate,
  reqHiddenDanger,
  reqDetector,
  reqDetectorDetail,
} from "@api/api.js";
import { mapState } from "vuex";
import Frame from "./frame.vue";
import tableStyleMixin from "@mixin/table-style";
import asc from "@utils/asc.js"; //加密解密
import EZUIKit from "ezuikit-js"; // ezuikit-js7.6.4
import advanceSearchMixin from "./mixins/advanceSearch.js";

export default {
  props: ["detailsName", "detailsInfo", "fcInfo", "userIds"],
  components: { Frame },
  mixins: [tableStyleMixin, advanceSearchMixin],
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      headers: {
        token: asc.decrypt(sessionStorage.getItem("token")),
      },
      ruleForm: {
        alarmFactor: "火警",
        feedback: "",
        pic: "",
        userId: "",
        handleUserId: "",
        userIds: [],
      },
      rules: {
        alarmFactor: [
          {
            required: true,
            message: "请选择告警类型",
            trigger: ["blur", "change"],
          },
        ],
        handleUserId: [
          {
            required: true,
            message: "请选择处理人",
            trigger: "change",
          },
        ],
      },
      restaurants: [],
      uploadDisabled: false, //加号默认显示
      dialogVisible2: false,
      dialogImageUrl: "",
      tableData: [],

      // 故障
      addInfo: {
        confirmResult: "现场解决",
        confirmmode: "现场解决",
        mode: "",
        maintenanceId: "",
        remark: "",
      },
      confirmResultList: ["现场解决"],
      addInforules: {
        confirmResult: [
          {
            required: true,
            message: "请选择处理类型",
            trigger: "change",
          },
        ],
        confirmmode: [
          {
            required: true,
            message: "请选择处理方式",
            trigger: "change",
          },
        ],
      },
      localEditInfo: {},
      detail: {},
      // 摄像头
      playerEZUIKit2: null,
      accessToken: "",
      name: "",
      deviceStr: {},
    };
  },
  watch: {
    dialogVisible(e) {
      if (e) {
        this.uploadDisabled = false;

        if (this.detailsName == "火情") {
          this.AlarmHandleResult();
          this.getByAlarmId(); // 已处理 处理中 未处理
        }
        if (this.detailsInfo.status != 1 && this.detailsName == "故障") {
          this.getHiddenDanger();
        }
        if (this.detailsInfo.source == 1) {
          // 人为
          // this.confirmResultList = ["现场解决", "转化工单"];
          this.confirmResultList = ["现场解决"];
          this.addInfo.confirmResult = "现场解决";
        } else {
          // 设备上报
          this.confirmResultList = ["真实隐患", "误报", "测试"];
          this.addInfo.confirmResult = "真实隐患";
        }
        if (
          this.detailsInfo.subDeviceCode != "" &&
          this.detailsInfo.subDeviceCode
        ) {
          this.getDetector();
          this.getDetectorDetail();
        }
        // if (this.detailsInfo.status == 3 || this.detailsInfo.status == 2) {
        this.getByAlarmId(); // 已处理 处理中 未处理
        // }
      }
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  created() {
    this.baseUrl = `${this.$baseURL_copy}file/upload`;
  },
  methods: {
    // 探测器详情
    async getDetectorDetail() {
      let res = await reqDetectorDetail({
        deviceCode: this.detailsInfo.imei || this.detailsInfo.deviceCode, //反馈跟告警返回的字段不一样
        detectorCode: this.detailsInfo.subDeviceCode,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.deviceStr = res.data.detail;
      if (this.deviceStr.cameraStatus == 1) {
        // 有关联摄像机
        this.gettoken();
      }
    },
    // 探测器查询主机详情
    async getDetector() {
      let res = await reqDetector(this.detailsInfo.subDeviceCode);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res, 'res');
      this.detail = res.data.detail;
    },
    // 获取隐患信息
    async getHiddenDanger() {
      // console.log(hiddenDangerId,"hiddenDangerId");
      const res = await reqHiddenDanger(this.detailsInfo.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      console.log(res, "res");
      if (res.data.row != null) {
        this.localEditInfo = res.data.row;
      }
    },
    onAdd() {
      this.$refs.refAddInfo.validate(async (valid) => {
        if (valid) {
          let mode = "";
          if (this.detailsInfo.source == 1) {
            // 人为
            if (this.addInfo.confirmResult == "转化工单") {
              mode = 1;
            } else {
              mode = 0;
            }
          } else {
            // 设备
            if (this.addInfo.confirmResult == "测试") {
              mode = "";
            } else {
              if (this.addInfo.confirmmode == "转化工单") {
                mode = 1;
              } else {
                mode = 0;
              }
            }
          }
          const res2 = await reqHiddenDangerUpdate({
            id: this.detailsInfo.id,
            userId: this.user.userId,
            username: this.user.userName,
            confirmResult: this.addInfo.confirmResult,
            mode: mode,
            maintenanceId: this.addInfo.maintenanceId,
            remark: this.addInfo.remark,
          });
          if (res2.code !== 20000)
            return this.$modal.notifyWarning(res2.message);

          this.$modal.notifySuccess("处理成功！");
          this.closeDialog();
          this.$parent.getHiddenDangerList(); //更新列表
        }
      });
    },
    // 告警处理记录
    async AlarmHandleResult() {
      var res = await reqAlarmHandleResult(this.detailsInfo.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.row || [];
      // console.log(res, 'res');
    },
    addSubmit() {
      this.$refs.refalarmHandleInfo.validate(async (valid) => {
        if (!valid) return;
        let params = {};
        if (this.ruleForm.alarmFactor == "转工单") {
          if (this.ruleForm.handleUserId == "")
            return this.$modal.notifyWarning("请选择处理人");
          params = {
            id: this.detailsInfo.id,
            alarmFactor: this.ruleForm.alarmFactor,
            userId: this.user.userId,
            userIds: this.ruleForm.userIds,
            handleUserId: this.ruleForm.handleUserId,
          };
        } else {
          params = {
            id: this.detailsInfo.id,
            alarmFactor: this.ruleForm.alarmFactor,
            feedback: this.ruleForm.feedback,
            pic: this.ruleForm.pic,
            userId: this.user.userId,
          };
        }
        const res = await reqAlarmHandle(params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);

        // 完结
        if (this.ruleForm.alarmFactor != "转工单") {
          let res2 = await reqClosedLoop({
            id: this.detailsInfo.id,
          });
          if (res2.code !== 20000)
            return this.$modal.notifyWarning(res2.message);
        }

        setTimeout(() => {
          this.$parent.AlarmHandleResult(); //更新告警列表
        }, 100);
        this.$modal.notifySuccess("处理成功！");
        this.closeDialog();
      });
    },
    //删除照片
    handleRemove(file) {
      this.ruleForm.pic = "";
      setTimeout(() => {
        this.uploadDisabled = false;
      }, 1000);
    },
    uploadSectionFile(file, fileList) {
      if (fileList.length >= 1) {
        this.uploadDisabled = true; //隐藏加号
      }
    },
    // 上传文件之前的钩子
    beforeAvatarUpload(file) {
      let isJPG = true;
      let isLt = file.size / 1024 < 20000; // 判断是否小于500Kb
      if (file.type !== "image/png" && file.type !== "image/jpeg") {
        this.uploadDisabled = false;
        this.$modal.notifyWarning("图片只能是 jpg/png 格式!");
        isJPG = false;
        return isJPG;
      } else if (!isLt) {
        this.$modal.notifyWarning("图片大小不能超过20MB! 请重新上传");
        this.uploadDisabled = false;
        isJPG = false;
      }
      return isJPG;
    },
    // 上传成功
    handleSuccessFunction(response, file, fileList) {
      this.ruleForm.pic = file.response.data.url;
    },
    // 文件超出个数限制时的钩子
    handleExceedScene() {
      this.$modal.notifyWarning(`照片只能上传一张`);
    },
    // 清除告警因素
    clearAlarmFactor() {
      this.restaurants = this.loadAll();
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "火警" },
        { value: "误报" },
        { value: "测试" },
        { value: "其它" },
      ];
    },
    // 销毁
    destroy() {
      if (this.playerEZUIKit2) {
        var destroyPromise = this.playerEZUIKit2.stop();
        destroyPromise = this.playerEZUIKit2.destroy();
        destroyPromise.then((data) => {
          console.log("promise 获取 数据", data);
        });
        this.playerEZUIKit2 = null;
        console.log("销毁");
      }
    },
    // 获取token
    async gettoken() {
      fetch(
        `https://open.ys7.com/api/lapp/token/get?appKey=d6a1a4287b9a4d78adebaa7bbc8c7125&appSecret=6b9102e6b4ef80beb7067be13d08bd2c`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          // console.log(res);
          this.accessToken = res.data.accessToken;
          this.getaddress();
        });
    },
    // 获取播放地址接口
    getaddress() {
      fetch(
        `https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=${this.accessToken}&deviceSerial=${this.deviceStr.cameraInfo.sn}&supportH265=1&quality=2`,
        {
          method: "POST",
        }
      )
        .then((response) => response.json())
        .then((res) => {
          // console.log(res, "123213213");
          console.log(this.accessToken, "this.accessToken", res);
          this.$notify.closeAll();
          this.name = "";
          if (res.code != 200) {
            this.name = res.msg;
            return;
          }
          // this.$modal.notifyWarning(res.msg);
          let playerEZUIKit2 = new EZUIKit.EZUIKitPlayer({
            id: `Player1${this.deviceStr.cameraInfo.id}`, // 视频容器ID
            accessToken: this.accessToken,
            url: res.data.url,
            useHardDev: true, //开启高性能模式
            template: "9e09e1d4de4043879e93082b38adfca6",
            // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
            plugin: ["talk"], // 加载插件，talk-对讲
            width: "350",
            height: "200",
          });
          if (playerEZUIKit2) {
            this.stopPromiseshow = false;
          }
          this.playerEZUIKit2 = playerEZUIKit2;
        });
    },
    // 点击关闭弹框
    closeDialog() {
      this.activeName = "first";
      if (this.$refs.refAddInfo != null) {
        this.$refs.refAddInfo.resetFields();
      }
      if (this.$refs.refalarmHandleInfo != null) {
        this.$refs.refalarmHandleInfo.resetFields();
      }
      this.ruleForm = {
        alarmFactor: "火警",
        feedback: "",
        pic: "",
        userId: "",
        handleUserId: "",
        userIds: [],
      };
      if (this.$refs.refaddWork != null) {
        this.$refs.refaddWork.resetFields();
        this.addWork = {
          maintenanceUserId: "",
          remark: "",
          status: 2,
        };
        this.picList = [];
        this.fileList = [];
        this.videoFile = "";
      }
      this.$parent.pauseAudio();
      this.$parent.showShade = false;
      this.dialogVisible = false;
      this.destroy();
    },
  },
};
</script>

<style lang="less" scoped>
// @import url("../../../../views/common.less");

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.footer-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.el-descriptions {
  color: #d2e1fe;
  .marginTop(10);
  .fontSize(14);
  box-sizing: border-box;
  padding: 0 0.5vw;
}

::v-deep .el-descriptions__header {
  .marginBottom(20);
}

::v-deep .el-descriptions__body {
  background: transparent;
  color: #d2e1fe;
  margin-left: 15px;
}

::v-deep .el-descriptions__title {
  .fontSize(16);
}

.orderDetail {
  display: flex;
  height: 100%;
  color: #d2e1fe;
  position: relative;

  .Information {
    width: 55%;

    // border-right: 1px solid #235396;
    .empty-video {
      // .width(500);
      // .height(270);
      width: 350px;
      height: 200px;
      background: #05143c;
      border-radius: 5px;
      border: 1px solid #235396;
      margin-left: 1vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .middle {
    width: 1px;
    height: 100%;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 55%;
      bottom: 0;
      width: 1px;
      background: linear-gradient(
        to bottom,
        rgba(48, 82, 174, 0),
        #3052ae,
        rgba(48, 82, 174, 0)
      );
    }
  }

  .flex-1 {
    flex: 1;

    .box-handle {
      width: 90%;
      height: 100%;
    }
  }

  .header {
    .fontSize(16);
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 10px;
    padding-left: 25px;
  }
}

::v-deep .el-textarea__inner {
  background: transparent !important;
}

::v-deep .el-upload--picture-card {
  background: transparent !important;
}

// 隐藏加号
::v-deep .disabled .el-upload--picture-card {
  display: none !important;
}

::v-deep .el-textarea .el-input__count {
  background: transparent;
}

::v-deep .el-form-item__label {
  .fontSize(14);
  color: #d2e1fe !important;
}

::v-deep .el-radio__label {
  .fontSize(14);
  color: #d2e1fe;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #7367f0;
}

.fuzhushuxian {
  font-size: 14px;
  color: #294798;
}

.camara_box {
  width: 350px;
  height: 200px;
  background: black;
  position: relative;
  border: 1px solid #073272;
  box-sizing: border-box;
  margin-left: 1vw;

  // 萤石云
  .camara_video {
    z-index: 1;
  }

  .deviceId {
    width: calc(100% - 20px);
    color: #e9e9e9;
    position: absolute;
    top: 4%;
    padding: 0 10px;
    flex-wrap: nowrap;
    z-index: 2;

    .spaceName {
      color: #e9e9e9;
      white-space: wrap;
      margin-bottom: 5px;
    }
  }

  .error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    color: red;
    .fontSize(15);
  }

  .none {
    color: #cfd3ec38;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }
}

// 工单流转
.timeline-container {
  width: 100%;
  padding-left: 5px;
  color: @primaryThemeTxtColor2;
  max-height: 62vh;
  overflow: auto;

  .item-title {
    font-size: 14px;
    color: #7367f0;
    margin: 5px 0;

    > span {
      color: #7367f0;
      margin: 0 6px;
    }
  }

  .info-box {
    .info-row {
      display: flex;
      justify-content: space-between;
      margin: 8px 0;
      color: @primaryThemeTxtColor2;

      > div {
        width: 33%;
      }

      .label {
        width: 100%;
      }

      .image-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .elImage {
          width: 25%;
          // aspect-ratio: 1 / 1;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
    }

    .btn-row {
      text-align: right;
    }
  }
}

// 标签页
::v-deep .el-tabs__header {
  background: transparent;
}

::v-deep .el-tabs__item {
  color: #989a9e;
  .fontSize(16);
}

::v-deep .el-tabs__header .el-tabs__item.is-active {
  background: transparent;
  color: #d2e1fe;
}

::v-deep .el-tabs__active-bar {
  background-color: #d2e1fe;
}

::v-deep .el-tabs__nav-wrap::after {
  background: #225193;
}

// 标签页结束-----------
::v-deep .el_first .el-descriptions__body {
  margin-left: 0;
}

::v-deep .el_first.el-descriptions {
  padding: 0;
}
</style>
